Elements
Components
Other Stuff
Buttons
<a href="#" class="btn btn-default">default</a>
<a href="#" class="btn btn-primary">primary</a>
<a href="#" class="btn btn-magenta">magenta</a>
<a href="#" class="btn btn-success">success</a>
<a href="#" class="btn btn-info">info</a>
<a href="#" class="btn btn-warning">warning</a>
<a href="#" class="btn btn-danger">danger</a>
<a href="#" class="btn btn-link">link</a>
<a href="#" class="btn btn-default disabled">Disabled</a>
<button class="btn btn-default" disabled>Disabled</button>
<button type="button" id="dropdown" data-toggle="dropdown" class="btn btn-default dropdown-toggle">
Dropdown
<span class="caret"></span>
</button>
<ul aria-labelledby="dropdownMenu1" class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
$('#dropdown').dropdown();
<a href="#" class="btn btn-primary"><i class="fa fa-star"></i> Star</a>
<a href="#" class="btn btn-magenta"><i class="fa fa-hand-spock-o"></i> Greeting</a>
<div role="toolbar" class="btn-group">
<button role="group" class="btn btn-default active">Left</button>
<button role="group" class="btn btn-default">Middle</button>
<button role="group" class="btn btn-default">Right</button>
</div>
<br>
<br>
<div role="toolbar" class="btn-group">
<button role="group" class="btn btn-primary">Left</button>
<button role="group" class="btn btn-primary active">Middle</button>
<button role="group" class="btn btn-primary">Right</button>
</div>
<br>
<br>
<div role="toolbar" class="btn-group">
<button role="group" class="btn btn-magenta">Left</button>
<button role="group" class="btn btn-magenta">Middle</button>
<button role="group" class="btn btn-magenta active">Right</button>
</div>
<a href="#" class="btn btn-primary btn-lg">Button Large</a>
<a href="#" class="btn btn-primary btn-md">Button Normal</a>
<a href="#" class="btn btn-primary btn-sm">Button Small</a>
<a href="#" class="btn btn-primary btn-xs">Button Mini</a>